<template>
  <div class="featured-page">
    <h1>精选文章</h1>
    <p class="featured-desc">这里收录了于君博客中最受欢迎、最有价值的文章，涵盖前端开发、生活思考、成长感悟等内容。</p>
    <div class="featured-list">
      <div class="featured-card" v-for="item in featured" :key="item.id">
        <div class="featured-meta">
          <span class="featured-date">{{ item.date }}</span>
          <span class="featured-category">{{ item.category }}</span>
        </div>
        <h3 class="featured-title">{{ item.title }}</h3>
        <p class="featured-summary">{{ item.summary }}</p>
        <div class="featured-info">
          <span>阅读 {{ item.views }}</span>
          <span>评论 {{ item.comments }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const featured = [
  { id: 1, title: '真的相', date: '2024-10', category: '思考', summary: '以安住且中立的心，照见身心的实相。', views: 4604, comments: 37 },
  { id: 2, title: '快乐的秘密', date: '2024-09', category: '生活', summary: '一个小游戏，关于快乐的本质。', views: 2710, comments: 35 },
  { id: 3, title: '只需愿意', date: '2024-09', category: '成长', summary: '我愿意，我愿意，我愿意。', views: 2153, comments: 16 },
  { id: 4, title: '最深沉的梦', date: '2024-09', category: '随笔', summary: '你醒了吗？', views: 2404, comments: 10 },
  { id: 5, title: '森林里倒下的树', date: '2024-09', category: '哲思', summary: '从前种种，譬如昨日死。', views: 2279, comments: 6 }
]
</script>

<style scoped>
.featured-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 0;
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
}
.featured-desc {
  color: var(--el-text-color-secondary);
  margin-bottom: 24px;
  font-size: 1.1rem;
}
.featured-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.featured-card {
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: var(--el-box-shadow-light);
  border: 1px solid var(--el-border-color);
  padding: 24px 28px;
  transition: box-shadow 0.2s;
}
.featured-card:hover {
  box-shadow: var(--el-box-shadow-dark);
}
.featured-meta {
  display: flex;
  gap: 18px;
  font-size: 0.98rem;
  color: var(--el-text-color-secondary);
  margin-bottom: 6px;
}
.featured-title {
  font-size: 1.3rem;
  color: var(--el-color-primary);
  margin: 0 0 8px 0;
}
.featured-summary {
  color: var(--el-text-color-regular);
  margin-bottom: 10px;
}
.featured-info {
  color: var(--el-text-color-secondary);
  font-size: 0.95rem;
  display: flex;
  gap: 18px;
}
</style> 